<template>
  <!-- 用户管理 -->
  <div>
    <el-card class="box-card manage addinte">
      <!-- 头部 -->
      <div slot="header" class="clearfix manage_header">
        <!-- 返回 -->
        <div class="back" @click="backClick">
          <i></i>
          <span>返回</span>
        </div>
        <h1>增加积分等级</h1>
      </div>
      <!-- 新增用户 -->
      <div class="manage_base modify_user modify_inte">
        <el-form :label-position="labelPosition" label-width="90px" :model="formmanageBase">
          <h2>新增积分等级</h2>
          <el-form-item label="积分名称:">
            <el-input v-model="formmanageBase.id"></el-input>
          </el-form-item>
          <el-form-item label="积分费用:">
            <el-input v-model="formmanageBase.id"></el-input>
          </el-form-item>

          <h2>会员功能</h2>
          <el-form-item label="技术指导:" >
            <el-input v-model="formmanageBase.id"></el-input>
            <div class="day">次</div>
          </el-form-item>
          <el-form-item label="远程协助:" >
              <el-input v-model="formmanageBase.id"></el-input>
          </el-form-item>
          <el-form-item label="下载速度:" >
            <el-input v-model="formmanageBase.id"></el-input>
          </el-form-item>
          <p>注:积分下载速度可以更改，vip下载速度不变。</p>
          <el-button type="primary">保存</el-button>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 是否禁用
      forbidden: "1",
      //   上传图片
      uploadImg: 0,
      // 靠右对齐
      labelPosition: "right",
      // 用户信息
      formmanageBase: {
        id: ""
      }
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    backClick() {
      this.$router.go(-1);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    handleSuccess(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList);
      this.uploadImg = fileList.length;
      console.log(this.uploadImg);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>

<style>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.manage_header {
  margin: 28px 0 27px 50px;
  position: relative;
}
.manage_header i {
  /* display: block; */
  position: absolute;
  top: 5px;
  left: 0;
  width: 10px;
  height: 20px;
  background: url("../assets/img/left.png") no-repeat;
  background-size: 10px 20px;
  vertical-align: middle;
}
.manage_header span {
  position: absolute;
  top: 0px;
  left: 22px;
  margin: 0;
  font-size: 20px;
  color: #3f51b5;
}
.manage_header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  color: #212121;
}
.addinte .el-card__header {
  padding: 0;
}
.manage_base {
  margin: 28px 0px 41px 80px;
}
.manage_base h2 {
  border-left: 4px solid #3f51b5;
  margin: 0;
  margin-bottom: 28px;
  padding-left: 10px;
  font-size: 20px;
  color: #212121;
}
.manage_base .el-input,
.manage_base .el-input__inner,
.upload_base {
  width: 160px;
}
.upload_base {
  float: left;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
.manage_base .el-form-item__label {
  font-size: 18px;
  color: #212121;
}
.upload_base i {
  /* display: block; */
  float: left;
  width: 28px;
  height: 20px;
  background: url("../assets/img/photo.png");
  background-size: 28px 20px;
  margin: 8px 10px 8px 16px;
}
.upload_base span {
  font-size: 16px;

  color: #757575;
}
.noSelect {
  margin-left: 10px;
  color: #757575;
  font-size: 16px;
}
.manage_base .el-button {
  width: 200px;
  height: 50px;
  background: #3f51b5;
  border-radius: 5px;
  border: none;

  font-size: 24px;
  color: #ffffff;
}
.modify_user .day {
  display: inline-block;
  width: 67px;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  text-align: center;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  color: #757575;
}
.modify_inte p {
    font-size: 14px;
color: #ff3c00;
}
</style>